<template>
  <view class="top__mode-page">
    <view v-for="(item, index) in HeadList" :key="index" class="tab__item"
      :style="item.id === activeId ? styleType.style1 : styleType.style2" @tap="changeActiveItem" :data-item="item">
      {{ item.name }}
    </view>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'

  @Component({})
  export default class TopModehead extends Vue {
    @Prop() propData: any
    formData: any = {}
    activeId: string = "-1"
    HeadList: Array < any > = []
    styleType: any = {
      style1: {},
      style2: {},
    }
    isFirst: boolean = true

    @Watch("propData", {
      deep: true
    })
    getFormData() {
      this.formData = this.propData
      this.getHeadList();
      this.getstyleType();
    }



    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.formData = this.propData
      this.getHeadList();
      this.getstyleType();
    }
    created() {
      this.isFirst = true;
    }

    /**
     * 获取tabList
     */
    getHeadList() {
      const curId = this.formData.currentFirstCategory.category ?
        this.formData.currentFirstCategory.category.id :
        "-1";
      const activeId = this.isFirst ? "-1" : curId;
      const list = this.formData.firstCatList.map(i => {
        return {
          id: i.category.id,
          name: i.category.name,
        };
      });
      this.setData({
          activeId,
          HeadList: [{
              id: "-1",
              name: "全部",
            },
            ...list,
          ],
        },
        () => {
          this.isFirst = false;
        },
      );
    }

    /**
     * 修改当前激活tab
     */
    changeActiveItem(e) {
      const item = e.currentTarget.dataset.item;
      this.formData.firstCatList.forEach(i => {
        i.isSelected = i.category.id === item.id;
      });
      this.setData({
        activeId: item.id,
      });
      this.$emit("changeCategoryId", item.id);
    }

    getstyleType() {
      const {
        fontColor,
        fontBg,
        fontNotColor,
        fontNotBg
      } = this.formData;
      const style1 = `color: ${fontColor}; background-color: ${fontBg}`;
      const style2 = `color: ${fontNotColor}; background-color: ${fontNotBg}`;
      this.setData({
        styleType: {
          style1,
          style2,
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .top__mode-page {
    width: 100%;
    height: 50px;
    overflow-x: scroll;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px 5px;
    background-color: #fff;

    .tab__item {
      display: inline-block;
      padding: 6px 16px;
      border-radius: 40px;
      font-size: 15px;
      color: #333;
      background-color: #fff;
      cursor: pointer;
      user-select: none;
      margin-top: 10px;
    }

    .tab__active {
      background-color: rgba(253, 78, 100, 1);
      color: #fff;
    }
  }
</style>